<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>连接页面</title>
    <!-- 引入 Vue -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <!-- 引入 Element UI -->
    <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-chalk/index.css">
    <script src="./node_modules/element-ui/lib/index.js"></script>
    <!-- 引入 CSS -->
    <link rel="stylesheet" href="css/chat-client.css">
</head>
<body>
    <div id="connect-app">
        <el-card>
            <h2>连接页面</h2>
            <div class="connection-row">
                <el-input v-model="userId" placeholder="请输入用户名" style="width: 300px;"></el-input>
                <el-button type="primary" :disabled="!userId" @click="connect">建立连接</el-button>
            </div>
        </el-card>
    </div>

    <script>
        // 新增 Vue 实例用于处理用户输入和连接逻辑
        new Vue({
            el: '#connect-app',
            data() {
                return {
                    userId: ''
                };
            },
            methods: {
                connect() {
                    if (this.userId) {
                        localStorage.setItem('userId', this.userId);
                        window.location.href = '/chat.html';
                    }
                }
            }
        });
    </script>
</body>
</html>